<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.先引入vue.js-->
    <script src="../js/vue.js"></script>
    <!--2.引入elementui的js-->
    <script src="element-ui/lib/index.js"></script>
    <!--3.引入elemetentui样式的css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>

</head>
<body>
    <!--准备容器  模版-->
<div id="app">
    <!--一行=24栏-->
    <el-row>
        <col :span="24"><div class="grid-content bg-purple-dark"></div></col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    <!--:gutter="20" 调整每栏之间的间隔-->
    <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>


    <!--:gutter="20" 调整每栏之间的间隔-->
    <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="1"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <!--列偏移-->
    <el-row :gutter="20">
        <el-col :span="6" :offset="1"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="start">
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <el-row :gutter="20" type="flex" justify="space-around">
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" ><div class="grid-content bg-purple"></div></el-col>
    </el-row>
</div>
</body>
</html>

<script>
    new Vue({
        el:'#app',
        data(){
            return{

            }
        }
    });

</script>
